<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <title>New Problem</title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="/editor/css/editormd.min.css">
    <script src="/editor/editormd.min.js"></script>
</head>
<body>
<div class="ui container segment" id="vproblem">
    <div class="ui header">支持Markdown</div>
    <form onsubmit="return false" class="ui form">
        <div class="field">
            Title:<input name="title" type="text" v-model="title">
        </div>
        <div class="field">
            <div class="ui checkbox">
                <label for="active">可见</label>
                <input id="active" name="acvive" v-model="active" type="checkbox">
            </div>
        </div>
        <div class="field">
            <div class="ui right labeled input ">
                <label class="ui label">Time Limit:</label>
                <input type="text" placeholder="Time Limit" v-model="time">
                <div class="ui basic label">
                    ms
                </div>
            </div>
        </div>
        <div class="field">
            <div class="ui right labeled input ">
                <label class="ui label">Memory Limit:</label>
                <input type="text" placeholder="Memory Limit" v-model="memory">
                <div class="ui basic label">
                    bytes
                </div>
            </div>
        </div>
        <div class="ui field">Tags(用
            <mark>英文逗号</mark>
            分隔，只能是已经存在的tag)
            <input name="tag" type="text" required v-model="tags">
        </div>
        <div class="field">
            题目分数Score: <input name="score" type="number" required v-model="score">
        </div>
        <div class="field">
            题目描述Description:
            <div id="editor-description">
                <textarea name="description" style="display: none"></textarea>
            </div>
        </div>
        <div class="field">
            输入Input:
            <div id="editor-input">
                <textarea name="input" style="display: none"></textarea></div>
        </div>
        <div class="field">
            输出Output:
            <div id="editor-output">
                <textarea name="output" style="display: none;"></textarea></div>
        </div>
        <div class="field">
            Sample Input:
            <textarea name="sampleInput" rows="8" v-model="sampleInput"></textarea></div>
        <div class="field">
            Sample Output:
            <textarea name="sampleOutput" rows="8" v-model="sampleOutput"></textarea>
        </div>
        <div class="form-group">
            提示Hint:
            <div class="form-group" id="editor-hint">
                <textarea name="hint" style="display: none"></textarea></div>
        </div>
        <div class="form-group">
            来源Source: <textarea class="form-control" v-model="source" cols="35" name="source" rows="3"></textarea>
        </div>
        <div class="ui button green" v-on:click="submit_problem()">提交Submit</div>
    </form>
</div>
<script>
    var editor_description;
    var editor_input;
    var editor_output;
    var editor_hint;
    $(function () {
        $('.ui.checkbox').checkbox();
        editor_description = editormd({
            id: "editor-description",
            path: "/editor/lib/",
            pluginPath: "/editor/plugins/",
            width: "90%",
            height: 500,
            autoFocus: false,
            codeFold: true,
            searchReplace: true,
            autoLoadKaTeX: true,
            tex: true,
            flowChart: true,
            previewCodeHighlight: true,
            imageUploadURL: "/api/media/upload",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
        });
        editor_input = editormd({
            id: "editor-input",
            path: "/editor/lib/",
            pluginPath: "/editor/plugins/",
            width: "90%",
            height: 500,
            autoFocus: false,
            codeFold: true,
            searchReplace: true,
            autoLoadKaTeX: true,
            tex: true,
            flowChart: true,
            previewCodeHighlight: true,
            imageUploadURL: "/api/media/upload",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
        });
        editor_output = editormd({
            id: "editor-output",
            path: "/editor/lib/",
            pluginPath: "/editor/plugins/",
            width: "90%",
            height: 500,
            autoFocus: false,
            codeFold: true,
            searchReplace: true,
            autoLoadKaTeX: true,
            tex: true,
            flowChart: true,
            previewCodeHighlight: true,
            imageUploadURL: "/api/media/upload",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
        });
        editor_hint = editormd({
            id: "editor-hint",
            path: "/editor/lib/",
            pluginPath: "/editor/plugins/",
            width: "90%",
            height: 500,
            autoFocus: false,
            codeFold: true,
            searchReplace: true,
            autoLoadKaTeX: true,
            tex: true,
            flowChart: true,
            previewCodeHighlight: true,
            imageUploadURL: "/api/media/upload",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico"],
        });
    });
    var vproblem = new Vue({
        el: "#vproblem",
        data: {
            title: "",
            active: false,
            time: "",
            memory: "",
            score: 0,
            description: "",
            input: "",
            output: "",
            sampleInput: "",
            sampleOutput: "",
            hint: "",
            source: "",
            tags: ""
        },
        methods: {
            submit_problem() {
                this.description = editor_description.getMarkdown();
                this.input = editor_input.getMarkdown();
                this.output = editor_output.getMarkdown();
                this.hint = editor_hint.getMarkdown();
                axios.post("/api/admin/problem/insert", {
                    title: this.title,
                    description: this.description,
                    input: this.input,
                    output: this.output,
                    sampleInput: this.sampleInput,
                    sampleOutput: this.sampleOutput,
                    hint: this.hint,
                    source: this.source,
                    time: this.time,
                    memory: this.memory,
                    active: this.active,
                    score: this.score,
                    tags: this.tags
                }).then(function (res) {
                    res = res.data;
                    if (res !== "success") {
                        console.log(res);
                        alert(res);
                    }
                    location.href = "/admin/problem";
                })
            }
        }
    })
</script>
</body>
</html>
